<template>
    <view class="container">
        <view class="info">
            <view class="nickname">{{State.user.nickname}}</view>
            <view class="vip" v-if="State.user.vipType===1">VIP有效期至{{ Common.timeFormat(State.user.vipExpiredTime,2)}}</view>
            <view class="vip" v-else-if="State.user.vipType===2">VIP有效期至永久</view>
            <view class="vip" v-else>您还不是VIP，购买套餐赠送VIP</view>
            <view class="bg">
                <uni-icons custom-prefix="iconfont"
                           type="iconfont-huangguan"
                           size="60"
                           color="#FFF">
                </uni-icons>
            </view>
        </view>

        <view class="box">
            <view class="title">
                <view class="left">购买套餐</view>
            </view>
            <view class="set-meal">
                <scroll-view class="scroll-list" scroll-x="true">
                    <view v-for="(item,index) in dict.enums.setMeal"
                          :class="activeIndex===index?'item active':'item'"
                          @click="activeIndex=index">
                        <view class="tag" v-if="item.ad">{{item.ad}}</view>
                        <view class="time">{{item.name}}</view>
                        <view class="now-price">¥<text>{{ item.money/100 }}</text></view>
                        <view class="original-price"><text>¥{{item.originMoney/100}}</text></view>
                        <view class="num">{{item.downloadNum===-1?'无限制/天':item.downloadNum+'条/天'}}</view>
                    </view>
                </scroll-view>
            </view>
            <view class="gd">
                <swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="2000"
                        :duration="500">
                    <swiper-item v-for="item in newPayList">
                        <view class="item">
                            <image :src="item.avatar" class="img" mode="aspectFill"></image>
                            {{item.content}}
                        </view>
                    </swiper-item>
                </swiper>
            </view>

            <view class="title">
                <view class="left">VIP权益</view>
            </view>

            <view class="content">
                <view class="t">139元套餐包含什么：</view>
                <view>1.赠送小程序1年VIP</view>
                <view>2.免费下载首页频道素材</view>
                <view>3.每日可下载20条素材</view>
            </view>
            <view class="tab">
                <view class="item" style="border-right:1px solid #EEE;border-bottom:1px solid #EEE;">
                    <view class="tit">
                        <uni-icons type="color" size="26" color="#333"></uni-icons>
                        <view class="txt">无水印</view>
                    </view>
                    <view class="con">每日更新海量高清无水印的营销发圈素材</view>
                </view>
                <view class="item" style="border-bottom:1px solid #EEE;">
                    <view class="tit">
                        <uni-icons type="cloud-download" size="26" color="#333"></uni-icons>
                        <view class="txt">免费下载</view>
                    </view>
                    <view class="con">VIP可享受免费下载，可随时下载</view>
                </view>
                <view class="item" style="border-right:1px solid #EEE;">
                    <view class="tit">
                        <uni-icons type="chat" size="26" color="#333"></uni-icons>
                        <view class="txt">专属客服</view>
                    </view>
                    <view class="con">为VIP用户提供一对一专属客服</view>
                </view>
                <view class="item">
                    <view class="tit">
                        <uni-icons type="gift" size="26" color="#333"></uni-icons>
                        <view class="txt">超值福利</view>
                    </view>
                    <view class="con">赠送高级导师超值视频课程</view>
                </view>
            </view>

<!--            <view class="title">-->
<!--                <view class="left">购买须知</view>-->
<!--            </view>-->

<!--            <view class="content">-->
<!--                <view class="t">折扣券是什么</view>-->
<!--                <view>凭折扣券到官方主办的实战训练营等</view>-->
<!--                <view>线下培训享受等值抵扣优惠或专属折扣优惠。</view>-->
<!--            </view>-->

<!--            <view class="content">-->
<!--                <view class="t">如何拿到折扣券:</view>-->
<!--                <view>1.下单后联系客服邮寄折扣券(需支付邮费)</view>-->
<!--                <view>2.如无需邮寄也可凭手机号享受同等优惠</view>-->
<!--                <view>3.以上方式二选一</view>-->
<!--            </view>-->

<!--            <view class="content">-->
<!--                <view class="t">折扣券使用流程:</view>-->
<!--                <view>1.收到折扣券</view>-->
<!--                <view>2.联系客服获取实战训练营时间安排</view>-->
<!--                <view>3.确认参加哪一期训练营</view>-->
<!--                <view>4.按时参加课程培训</view>-->
<!--            </view>-->

            <view class="explain">*注；购买套餐不支持任何方式的退款，不支持任何方式更换账号，下单后默认您已了解并同意此声明。</view>
        </view>

        <view @click="pay()" v-if="State.user.vipType !== 2" class="uni-btn btn">下一步</view>
    </view>
</template>

<script>
import { IndexApi } from '@/api/IndexApi'
import { DictApi } from '@/api/DictApi'

export default {
    data() {
        return {
			Config: this.$Config,
			Common: this.$Common,
			Auth: this.$Auth,
			ShareUtil: this.$ShareUtil,
			State: this.$store.state,
			Dict: this.$Dict,

            dict: {enums:{setMeal:{}}},
            activeIndex:-1,
            newPayList:[{
                content:"[佰奕嘉产后修复中心] 2小时前购买了3个月会员",
                avatar: this.Config.OSS_HOST+'/image/2024/9/8/17257259270423713.jpg'
            },{
                content:"[Buk] 2小时前购买了6个月会员",
                avatar: this.Config.OSS_HOST+this.Config.AVATAR
            },{
                content:"[余生向阳] 3小时前购买了3个月会员",
                avatar: this.Config.OSS_HOST+'/image/2024/9/7/17257171816867699.jpg'
            }],
			payIng:false
        }
    },
    onLoad(e) {
		let that = this
        DictApi.getDict().then((response) => {
            response.enums.setMeal.forEach(function(item,index){
                item['downloadNum'] = response.enums.vipGrade.filter(o=>o.code===item.vip)[0].downloadNum
				
				if(item.vip == e.vipGrade){
					that.activeIndex = index
				}
			})
            this.dict = response
        })
    },
    onReady() {
    },
    methods: {
        pay() {
			let that = this
			if(that.payIng) return false
			that.payIng = true
			
            if (that.activeIndex===-1) {
                uni.showToast({
                    title: '请选择套餐',
                    duration: 2000,
                    icon: 'none'
                });
                return false
            }
            let setMeal =that.dict.enums.setMeal[that.activeIndex]
            let param = {
                bizType: 1,
                bizOrderNo: setMeal.code,
                payType: 1,
                description: "购买会员",
                amount: setMeal.money
            }
            IndexApi.pay(param).then((response) => {
				uni.requestPayment({
				    provider: 'wxpay',
					timeStamp: response.timeStamp,
					nonceStr: response.nonceStr,
					package: response.packageVal,
					signType: response.signType,
					paySign: response.paySign,
					success: function (res) {
						that.payIng = false
						that.$store.dispatch('user/getInfo')
						that.Common.toUrl('/pages/user/wallet/index')
					},
					fail: function (err) {
						that.payIng = false
						console.log('fail:' + JSON.stringify(err));
					}
				});
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.container{padding:15px 15px 60px 15px;}
.info{border-radius: 7px; padding:20px 15px;background: linear-gradient(to right, $uni-global-color, #A8CE3B); position: relative;}
.info .nickname{ color:#FFF; opacity: 0.8;}
.info .vip{ color:#FFF; opacity: 0.5; margin-top:5px; font-size: 14px;}
.info .bg{width:60px; height:60px; position: absolute;right:15px; top:15px; background-size: 100%; opacity: 0.5;}

.box{ background: #FFF; margin-top:15px; padding:15px 0;}
.box .title .left{ border-left:3px solid #444547; padding-left:5px; margin-left:15px; font-weight: bold;}


.set-meal{margin-top:15px;}
.set-meal .scroll-list {white-space: nowrap;width: 100%;}
.set-meal .scroll-list .item {display: inline-block;width: 98px; padding:25px 0 15px 0; position: relative;
    margin-left:10px;text-align: center; border-radius:5px;  border:1px solid #EEE; overflow: hidden;}
.set-meal .scroll-list .item .tag{ position: absolute; left:0px; top:0px; font-size: 10px; background:#353951;
           color:#FFF; border-radius: 0 0 5px 0; padding:1px 5px; }
.set-meal .scroll-list .item .time{ font-weight: bold; font-size: 14px;}
.set-meal .scroll-list .item .now-price{ font-size: 14px; color:#DF0C48; margin-top:10px;}
.set-meal .scroll-list .item .now-price text{ font-size: 28px; font-weight: bold;}
.set-meal .scroll-list .item .original-price{ margin-top:10px;}
.set-meal .scroll-list .item .original-price text{ color:#BDBDBD; font-size: 16px; font-weight: bold;
    text-decoration:line-through;}
.set-meal .scroll-list .item .num{ font-size: 10px; color:#999; margin-top:1px;}

.set-meal .scroll-list .active { border-color:#E20C46; background: #FEF2F6;  }
.gd{padding:0 15px; margin-top:20px; font-size: 12px; height:50px;}
.gd .item{ font-size: 12px; display: flex; }
.gd .item .img{ width:18px; height:18px; border-radius: 100%; margin-right:5px;}
.content{ padding:0 15px; line-height: 30px; margin-top:20px;}
.content .t{font-weight: bold;}

.tab{ display: grid; margin:20px 15px;
    grid-template-rows: 50% 50%;
    grid-template-columns: 50% 50%;
}
.tab .item{ padding:10px; }
.tab .item .tit{ display: flex; }
.tab .item .tit .txt{ font-size: 18px; font-weight: bold; margin-left:10px; }
.tab .item .con{ font-size: 12px; color:#999; line-height: 20px; margin-top:5px; }

.explain{ padding:0 15px; margin-top:30px; text-decoration: underline;}

.btn{ position: fixed; left:0px; bottom: 0px; width:100%; border-radius: 0px; height:50px; line-height:50px;}
</style>
